/* layout */
/* 皮肤颜色 */
[v-cloak]{
	display: none;
}
.theme{
	background: url(../img/header/bg.png);
	color:#fff;
}
.skin{
	background: #01060c;
}
.skin2{
	background: rgba(9,73,109,0.25);
}

/* 头部 */
.header{
	width: 1920px;
	height: 66px;
	line-height: 66px;
	text-align: center;

}

 .header-border{
 	border-bottom:1px solid #1b1f25;
 }

 .nav-list{
 	width: 684px;
 	height: 100%;
 }

 .nav-item{
 	width: calc(100% / 3);
 }

 .nav--active{
 	background: url(../img/header/topnav_bg.png);
 }

 .nav-list a{
 	font-size: 18px;
 	color:#b0e9fe;
 }

 .right-bar a{
 	width: 32px;
 	height: 32px;
 	display:block;
 	background:url(../img/header/top_icon.png) no-repeat;
 }

 .right-bar-time{
 	color:#b0e9fe;
 	font-size: 14px;
 }
  .right-bar-role{
  	margin-top: 16px;
  	border-left:1px solid #1b1f25;
  }
 .right-bar-help a{
	background-position: 0px 0px;
 }
 .right-bar-role a{
 	background-position: -32px 0px;
 }

.main{
	width: 1880px;
}

/* 左侧内容 */
.left-side{
	width: 450px;
}

.input-output{
	width: 100%;
	height: 320px;
}

/* 主内容 */
.main-contain{
	width: 1410px;
}


/* 负责间隙 */
.auto{
	margin:0 auto;
}
.outter-right{
	margin-right: 20px;
}
.outter-top{
	margin-top: 20px;
}
.outter-bottom{
	margin-bottom: 10px;
}
.outter-left{
	margin-left: 20px;
}
.inner-align{
	padding:0 20px;
}
.outter-align{
	margin:0 auto;
}
.inner-top{
	padding-top: 20px;
}

.mr2{
	margin-right: 2px;
}

/* 边框 */
.border{
	border:1px solid #09496d;
}
.highlight-border{
	border:1px solid #0a5884;
}
.common-title{
	width: 450px;
	color:#00c5f6;
	font-size: 18px;
}
/* 左侧详细内容 */
/* 产用可视化内容 */
.input-output{
	width: 100%;
	height: 264px;
	padding: 20px;
	text-align:center;
}

.product{
	width: calc(100% / 2);
}
.product-title{
	margin-bottom: 20px;
	font-size: 18px;
	line-height: 18px;
	padding-right: 28px;
}
.product-data{
	width: 185px;
	height: 132px;
	background: url(../img/circle_bg.png) left 0;
	margin-bottom: 14px;
	margin-left: 19px;
	position: relative;
	line-height: 132px;
}
.product-data-val{
	width: 132px;
	font-size: 36px;
	color:#14be31;
}
.product-status{
	width: 28px;
	height: 28px;
	background: url(../img/circle_up.png) no-repeat;
	display:block;
	position: absolute;
	right:56px;
	bottom:12px;
}
.product-view{
	height: 40px;
	width: 132px;
	margin-left: 19px;
	background: url(../img/test.png);
	background-size:cover;
}

.use{
	width: calc(100% / 2);

}
.use-title{
	margin-bottom: 20px;
	font-size: 18px;
	line-height: 18px;
	padding-left: 46px;
}
.use-data{
	width: 185px;
	height: 132px;
	background: url(../img/circle_bg.png) right 0px;
	margin-bottom: 14px;
	position: relative;
	line-height: 132px;
}
.use-data-val{
	width: 132px;
	margin-left: 54px;
	font-size: 36px;
	color:#14be31;
}
.use-status{
	width: 28px;
	height: 28px;
	background: url(../img/circle_up.png) no-repeat;
	display:block;
	position: absolute;
	right:2px;
	bottom:12px;
}
.use-view{
	height: 40px;
	width: 132px;
	margin-left: 58px;
	background: url(../img/test.png);
	background-size:cover;
}

.unit{
	font-size: 18px;
	color:#b0e9fe;
}



/* 主管压力/放散 */
.pressure-title{
	height: 30px;
	line-height: 30px;

}
.pressure-content{
	width: 100%;
	height: 258px;
}

.pressure-data{
	width: 100%;
	height: 50px;
	border-bottom:1px solid #08486c;
	line-height: 50px;
	text-align: center;
}
.pressure-data-item{
	width: calc(100% / 2);
	height: 50px;
}
.pressure-data-item-border{
	border-right:1px solid #08486c;
}
.pressure-data-item-percent{
	font-size: 24px;
	color:#fe3b2f;
}
.pressure-chart{
	width: 100%;
	height: 208px;
	padding: 10px;
}
/* 放散详情 */
.details {
	margin-top: 20px;
}
.details-title{
	font-size: 18px;
	color: #00c5f6;
}
.details ul {
	width: 450px;
	height: 185px;
	border: 1px solid #09496d;
}
.details ul li{
	width: 100%;
	height:calc(185px / 5);
	border-bottom: 1px solid #09496d;
}
.details ul li .p1{
	width: 20%;
	height:100%;
	border-right: 1px solid #09496d;
	text-align: center;
	line-height: 36px;
}
.details ul li .p2{
	width: 60%;
	height:100%;
	border-right: 1px solid #09496d;
	text-align: center;
	line-height: 36px;
}
.details ul li .p3{
	width: 20%;
	height:100%;
	text-align: center;
	line-height: 36px;
}
.details ul li .cont-p{
	width:60%;
	height: 100%
}
.details ul li .cont-p .p4{
	width:calc(100% / 3);
	height: 100%;
	border-right: 1px solid #09496d;
}
/*  产气波动归因*/
.gas-title{
	height: 30px;
	line-height: 30px;
}
.gas-content{
	width: 100%;
	height: 203px;
}

/* 主内容区 */
.main-list{
	width: 100%;
	height: 700px;
}
.main-item{
	width:calc(100% / 5);
	height: 100%;
}
.main-item-status-l{
	padding-top: 4px;
	width: 100%;
	height: 60px;
	background: url(../img/gaspipe_bg.png);
}
.main-item-status-m{
	padding-top: 4px;
	width: 100%;
	height: 60px;
	background: url(../img/gaspipe_bg.png) -282px 0;
}
.main-item-status-r{
	padding-top: 4px;
	width: 100%;
	height: 60px;
	background: url(../img/gaspipe_bg.png) right 0;	
}

.main-item-border{
	border-right:1px dashed #2d404c;
}
.main-item-data{
	width: 100%;
	height: 316px;
	/* background: url(../img/equipment.png) no-repeat 0 -306px; */
	position: relative;
}
.main-item-gaolu{
	background-position:0 -306px;
}
.main-item-refenglu{
	background-position:-282px -306px;
}
.main-item-zhagang{
	background-position:-564px -306px;
}
.main-item-others{
	background-position:-846px -306px;
}
.main-item-guolu{
	background-position:-1128px -306px;
}
.main-item-data-val{
	text-align: center;
	line-height: 40px;
	font-size: 14px;
	color: #fff;
}
.main-item-data-status{
	width: 51px;
	height: 16px;
	margin:0 auto;
	background: url(../img/gaspipe_arrow.png) no-repeat -99px;
}
.main-item-data-status-in{
	width: 51px;
	height: 16px;
	margin:0 auto;
	background: url(../img/gaspipe_arrow.png) no-repeat -249px;
}

.main-item-status-line{
	width: 1px;
	height: 48px;
	position: absolute;
	right:-1px;
	top:1px;
	background: #02120f;
}
.numcolor{
	color: #14be31;
	font-size: 20px;
}
/* .main-item-normal{
	background-position:0px 0px;
}
.main-item-reduce{
	background-position:-282px 0px;
}
.main-item-mod{
	background-position:-564px 0px;
} */
.red{
	color: red;
}
.dataform{
	width: 100%;
	height: 43px;
	line-height: 43px;
	border-top: 1px solid #80a4cc;
	padding-left: 20px;
	padding-right: 20px;
}
.dataform p{
	width: 100px;
}
.main-item-data-border{
	border-bottom:1px solid #0b395b;
}
.main-item-data-title{
	font-size: 18px;
	color:#b0e9fe;
}
.main-item-data-content{
	padding-top: 20px;
	padding-left: 10px;
	width: 242px;
	height: 100px;
}
.main-item-data-current{
	width: 80px;
	font-size: 12px;
	color:#b0e9fe;
	padding:0 10px;
}
.main-item-data-current .current-data{
	font-size: 64px;
	color:#14be31;
}
.main-item-data-prediction{
	width: 80px;
	font-size: 12px;
	color:#b0e9fe;
	padding:0 10px;
}
.main-item-data-prediction .prediction-data{
	font-size: 32px;
	color:#14be31;
}
.unit{
	margin-left: 15px;
	font-size: 16px;
	color: #b0e9fe;
	padding-top: 30px;
}
.main-item-chart{
	width: 100%;
	height: 276px;

}
.broadcast{
	height: 30px;
	line-height: 30px;
}
.broadcast a{
	color:#00ccfe;
}
.broadcast-content{
	width: 100%;
	height: 125px;
	position: relative;
}
/* 表格布局 */
.w320{
	width: 320px;
}
.w160{
	width: 160px;
}
.w112{
	width: 112px;
}
.title-bg{
	background: #0b3951;
}
.backgroundR{
	background:rgba(255,0,0,0.5);
}
.backgroundY{
	background:rgba(255, 155, 0, 0.67);
}
.title-list{
	padding:2px;
	text-align: center;
	line-height: 30px;
	font-size: 14px;
	border-bottom:1px solid #0b395b;
}

.contents{
	height: 100px;
	position: relative;
	text-align: center;
	line-height: 32px;
	font-size: 14px;
	color:#b0e9fe;
	overflow:hidden;
}
.content-list{
	position: absolute;
	left:0;
	top:0;
}

.content-item{
	border-bottom:2px solid #0b395b;
}

/* 滚动条 */
.scroll-box{
	position: absolute;
	width: 5px;
	height: 170px;
	border:1px solid #134263;
	right:0;
	top: 0;
	background: #03131f;
	
}
.scroll-bar{
	position: absolute;
	background: #207494;
	/* height: 100px; */
	width: 2px;
	left:1px;
}

